お手軽高機能！Closure UI【goog.ui.CharPicker】

お手軽高機能！Closure UI

#JavaScript

#HTML5

#Closure

#RIA

稲毛透

2012.11.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Closure Libraryに用意されている「goog.ui.CharPicker」は、IME等に備わっているような「文字パレット」をWEBページ上に実現するコンポーネントです。パレット上での選択もしくは文字コードの指定により、Unicode文字をピックアップすることができます。

デモ

ボタンを押下するとCharPickerコンポーネントが表示されます。パレットから文字を選択するか、下部の入力フィールドに文字コード（Unicode）を入力しOKボタンを押下することで、上部の入力フィールドに対象の文字が挿入されます。

デモコード

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>goog.ui.CharPicker</title>
    <meta charset=utf-8>
    <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script>
      goog.require('goog.events.EventType');
      goog.require('goog.i18n.CharPickerData');
      goog.require('goog.i18n.uChar.LocalNameFetcher');
      goog.require('goog.style');
      goog.require('goog.ui.CharPicker');
      goog.require('goog.ui.Component');
    </script>
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/common.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menubutton.css">
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/charpicker.css">
    <style type="text/css">
      input#textinput {
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <p>
      <input id="textinput" type="text">
      <button id="button">Toggle CharPicker</button>
    </p>
    <p>
      <span id="charPicker" style="display:none;"></span>
    </p>
    <script>
      goog.scope(function() {
        var EventType = goog.events.EventType;
        var CharPickerData = goog.i18n.CharPickerData;
        var LocalNameFetcher = goog.i18n.uChar.LocalNameFetcher;
        var CharPicker = goog.ui.CharPicker;
        var Component = goog.ui.Component;
        
        var picker = new CharPicker(new CharPickerData(), new LocalNameFetcher());
        picker.render(goog.dom.getElement('charPicker'));
        picker.addEventListener(
          Component.EventType.ACTION,
          function(event) {
            goog.dom.getElement('textinput').value += picker.getSelectedChar();
          }
        );
        
        goog.events.listen(goog.dom.getElement('button'),
          EventType.CLICK,
          function(event) {
            var element = goog.dom.getElement('charPicker');
            goog.style.showElement(element, (element.style.display == 'none'));
          }
        );
      });
    </script>
  </body>
</html>

使い方

CharPickerコンポーネントは、生成したインスタンスを対象となる要素に「描画（render）」もしくは「装飾（decorate）」して用います。

Closure Libraryのロード

<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
  goog.require('goog.events.EventType');
  goog.require('goog.i18n.CharPickerData');
  goog.require('goog.i18n.uChar.LocalNameFetcher');
  goog.require('goog.style');
  goog.require('goog.ui.CharPicker');
  goog.require('goog.ui.Component');
</script>

6行目: Closure Libraryのbase.jsをロードします。
（このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。）
7～14行目: 必要とするClosure Libraryを宣言します。ここで「require」したものがグローバル変数領域に展開されます。

標準スタイルのロード

<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/common.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menubutton.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/charpicker.css">

15～17行目: CharPickerコンポーネントに標準で用意されているスタイル定義をロードします。UIコンポーネントには専用のスタイルが定義されたCSSファイルが用意されているものがあります。通常はクラス名と同様の名称（goog.ui.CharPicker→charpicker.css）になっているので直ぐに見つかると思います。CharPickerを構成する要素に「goog.ui.MenuButton」が含まれている為、MenuButton用のスタイル「menubutton.css」もロードしています。

画面要素

<p>
  <input id="textinput" type="text">
  <button id="button">Toggle CharPicker</button>
</p>
<p>
  <span id="charPicker" style="display:none;"></span>
</p>

26行目: CharPickerコンポーネントで選択した文字が挿入されるinput要素です。
27行目: CharPickerの表示を切り替えるbutton要素です。
30行目: CharPickerコンポーネントを「装飾（decorate）」する為のspan要素です。

CharPickerの生成および描画

var picker = new CharPicker(new CharPickerData(), new LocalNameFetcher());
picker.render(goog.dom.getElement('charPicker'));
picker.addEventListener(
  Component.EventType.ACTION,
  function(event) {
    goog.dom.getElement('textinput').value += picker.getSelectedChar();
  }
);

40行目: CharPickerクラスのインスタンスを生成しています。コンストラクタの第一および第二引数は必須となります。第一引数にはカテゴリ名と文字リストを表すCharPickerDataオブジェクトを、第二引数にはローカルから文字名を取得するLocalNameFetcherオブジェクトを指定しています。
41行目: 「ID:charPicker」のspan要素をCharPickerコンポーネントとして「装飾（decorate）」しています。
42～47行目: CharPickerコンポーネントのリスナにイベントハンドラを追加しています。ハンドラではCharPickerコンポーネントで選択された文字をinput要素に挿入する処理をしています。